<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>登陆界面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      /* body {
        background: url(./冰冰老婆3.gif) no-repeat 0 100%;
      } */
      form {
        float: right;
        margin-right: 900px;
      }
      input {
        display: flex;
        align-items: baseline;
      }
    </style>
  </head>
  <body>
    <img src="./冰冰老婆3.gif" alt="" />
    <form action="">
      🆔用户名
      <input type="text" name="" id="uname" />
      🈳密码
      <input type="text" name="" id="pwd" />
      验证码
      <img src="http://kg.zhaodashen.cn/v1/public/captcha.jsp" alt="" />
      <input type="text" name="" id="captcha" />
      勾选7天免登录 <input type="checkbox" />
      <input type="submit" value="登录" />
    </form>
  </body>
  <script src="./axios.js"></script>
  <script>
    //1.获取登录按钮
    let loginBtn = document.querySelector("input[type=submit]");
    //2.绑定点击事件
    loginBtn.onclick = async function(evt) {
      let e = evt || window.event;
      e.preventDefault();
      //3.表单验证、异步请求
      let uname = document.querySelector("#uname").value;
      let pwd = document.querySelector("#pwd").value;
      let captcha = document.querySelector("#captcha").value;
      let res = await post(
        "http://kg.zhaodashen.cn/v1/public/login.jsp",
        `uname=${uname}&pwd=${pwd}&captcha=${captcha}`
      );
      //3.拿到接口数据，判断：登陆成功：提示、存储、跳转；登陆失败：提示
      if (res.meta.state == 200) {
        alert(res.meta.msg);
        if (document.querySelector("input[type=checkbox]").checked) {
          localStorage.setItem("uname", res.data.uname);
          localStorage.setItem("token", res.data.token);
          localStorage.setItem(
            "expires",
            new Date().getTime() + 1000 * 60 * 60 * 24 * 7
          );
        } else {
          sessionStorage.setItem("uname", res.data.uname);
          sessionStorage.setItem("token", res.data.token);
        }
        location.href = "./member.html";
      } else {
        alert(res.meta.msg);
      }
    };

    document.querySelector("img").onclick = function() {
      this.src =
        "http://kg.zhaodashen.cn/v1/public/captcha.jsp?t=" +
        new Date().getTime();
    };
  </script>
</html>
